<template>
  <div class="con">
    <div class="container link-container" :style="{ background: titleColor }">
      <el-row :gutter="20">
        <el-col :span="4">
          <div class="grid-content bg-purple">
            <div class="logo-box">
              <img class="logo-img" src="../image/logo.png" alt="" />
            </div>
          </div>
        </el-col>
        <el-col :span="16">
          <div class="grid-content bg-purple">
            <div class="nav-ul">
              <div class="nav-li" v-for="(value, index) in navList" :key="index" @click="navToPage(index)">
                <router-link :to="toList[index]">{{ value }}</router-link>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple">
            <div class="information">
              <!-- <div class="search-content" :class="{ active: isSearchActive == 'active' }">
                <img @click="searchActive()" class="search-logo" src="../assets/search.svg" alt="" />
                <div class="search-input">
                  <input type="text" ref="searchInput" placeholder="请输入搜索内容" @blur="isSearchActive = false" />
                  <i class="el-icon-circle-close" @click="isSearchActive = false"></i>
                </div>
              </div> -->
              <div class="person">
                <i class="el-icon-minus"></i>
                <img class="user-logo" src="../assets/user-logo.png" alt="" @click="toMine" />
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="title" :style="{ display: isTitleShow, background: titleColor }">
      <div>尊敬的用户您好！ 欢迎您来到ZEROMeat</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "NavLink",
  props: {},

  data() {
    return {
      navList: ["首页", "新品", "市场", "活动日历", "新闻"],
      toList: ["/home", "/find", "/market", "/notice", "/news"],
      navActive: 0,
      isSearchActive: false,
      titleColor: "rgba(255, 255, 255, 0.4)",
      isTitleShow: "none",
    };
  },
  methods: {
    navToPage(value) {
      this.navActive = value;
      const hasLocation = window.location.href.split("#/")[1].split("/")[0];
      if (hasLocation == "home") {
        this.isTitleShow = "block";
        console.log(this.navActive);
      } else {
        this.isTitleShow = "none";
        console.log(this.navActive);
      }
    },
    searchActive() {
      this.isSearchActive = "active";
      this.$refs.searchInput.focus();
    },
    // 监听页面滚动 获取滚动条位置
    windowScroll() {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      // console.log(scrollTop)
      if (scrollTop == 0) {
        this.titleColor = "rgba(255, 255, 255, 0.4)";
        console.log("toggle");
      } else {
        this.titleColor = "#fff";
      }
    },
    //放回当前页面
    returnPageIndex() {
      this.$emit("sendPageIndex", this.navActive);
    },
    toMine() {
      this.isTitleShow = "none";
      this.$router.push("/mine");
    },
  },
  mounted() {
    window.addEventListener("scroll", this.windowScroll); //监听页面滚动
    // console.log(window.location.href.split("#/")[1]);
    const hasLocation = window.location.href.split("#/")[1].split("/")[0];
    // console.log(hasLocation);
    if (hasLocation == "home") {
      this.isTitleShow = "block";
    } else {
      this.isTitleShow = "none";
    }
  },

  destroyed() {
    window.removeEventListener("scroll", this.windowScroll); //销毁滚动事件
  },
  // computed:{
  //     titleShow(){
  //         if(this.navActive==0){
  //             return 'block'
  //         }else{
  //             return 'none'
  //         }
  //     }
  // }
};
</script>
<style  lang="less" scoped>
* {
  margin: 0;
  padding: 0%;
}

.con {
  position: relative;


  .title {
    position: absolute;
    margin-top: 0px;
    width: 100%;
    height: 45px;
    // background: #fff;
    // opacity: 0.7;
    z-index: 11;
    transition: 0.5s;
    box-shadow: 0px -1px 0px rgb(160 157 157 / 29%);

    div {
      line-height: 45px;
      font-size: 16px;
    }
  }

  .link-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: rgba(255, 255, 255, 0.6);
    overflow: hidden;
    transition: 0.6s;


    .el-row {
      display: flex;
      padding: 5px 10px 5px 10px;
      // min-width: 900px;
      box-sizing: border-box;
      height: 70px;
      // box-shadow: 1px 1px 1px rgba(160, 157, 157, 0.29);
      background: #fff;

      &:last-child {
        margin-bottom: 0;
      }
    }

    .el-col {
      border-radius: 4px;

      .logo-box {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        box-sizing: border-box;
        min-width: 90px;
        .logo-img {
          width: 100%;
          object-fit: cover;
          
        }
      }

      .nav-ul {
        display: flex;
        // align-items: center;
        height: 100%;

        .nav-li {
          height: 100%;
          @apply w-24;
          line-height: 50px;
          color: rgba(0, 0, 0, 0.4);
          cursor: pointer;

          a {
            text-decoration: none;
            color: rgba(0, 0, 0, 0.4);
            font-family: sans-serif;
            width: 100%;
            height: 100%;
            display: block;
            @apply font-semibold;
          }

          .router-link-active {
            @apply text-blue-700;
            width: 100%;
            height: 100%;
          }
        }

        @media screen and (max-width: 968px) {
          .nav-li {
            @apply w-12;

            a {
              font-size: 1rem;

            }
          }
        }
      }

      .information {
        position: relative;
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;

        .search-content {
          position: relative;
          height: 100%;
          width: 25px;
          // background: pink;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          transition: 0.5s;
          flex-shrink: 0;
          overflow: hidden;

          .search-logo {
            width: 25px;
          }

          .search-input {
            position: relative;
            width: 0%;
            height: 100%;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            overflow: hidden;
            transition: 0.5s;

            input {
              border: none;
              outline: none;
              height: 70%;
              width: 100%;
            }
          }
        }

        .search-content.active {
          width: 350%;

          .search-input {
            width: 90%;

            input {
              padding-left: 10px;
            }
          }
        }

        i {
          font-size: 25px;
        }

        .person {
          height: 100%;
          width: 55px;
          padding-right: 10px;
          box-sizing: border-box;
          flex-shrink: 0;
          display: flex;
          align-items: center;
          justify-content: center;

          i {
            position: relative;
            display: block;
            transform: rotate(90deg);
            font-size: 25px;
          }

          .user-logo {
            width: 25px;
            cursor: pointer;
          }
        }
      }
    }
  }

  .bg-purple-dark {
    background: #99a9bf;
  }

  .bg-purple {
    // background: #d3dce6;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .grid-content {
    border-radius: 4px;
    height: 50px;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
}
</style>